<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    function WarningBanner(props) {
        if (!props.warn) {
            return null;
        }

        return (
                <div className="warning">
                    Warning!
                </div>
        );
    }

    class Page extends React.Component {
        constructor(props) {
            super(props);
            this.state = {showWarning: true}
            this.handleToggleClick = this.handleToggleClick.bind(this);
        }

        handleToggleClick() {
            this.setState(prevState => ({
                showWarning: !prevState.showWarning
            }));
        }

        render() {
            return (
                    <div>
                        <WarningBanner warn={this.state.showWarning} />
                        <button onClick={this.handleToggleClick}>
                            {this.state.showWarning ? 'Hide' : 'Show'}
                        </button>
                    </div>
            );
        }
    }

    ReactDOM.render(
            <Page />,
        document.getElementById('example')
    );

</script>
</body>
</html>

